<template>
  <div class="ListTemplate-container">
    <div class="page-header">
      <span class="title">{{ $route.meta.title || '相关业务' }}</span>
      <a-icon type="close" @click="handleCancel" :style="{ color: '#333', fontSize: '14px' }" />
    </div>
    <div class="page-body">
      <a-spin :spinning="loading.isList">
        <a-empty v-if="!businessList.length" />
        <div class="item-box" v-for="item in businessList" :key="item.id" @click="openDetailModal(item)">
          <div class="item-row item-header">
            <span>{{ item.description }}</span>
            <a-tag color="#f50">{{ item.status }}</a-tag>
          </div>
          <div class="item-row item-chid">{{ item.checkDescribe }}</div>
          <div class="item-row item-footer">
            <span class="font--blue">{{ item.employee }}</span>
            <span>{{ item.checkDate }}</span>
          </div>
        </div>
      </a-spin>
    </div>
    <!-- 详情窗口 -->
    <BaseModal :visible="visible.detail" :width="800" @cancel="visible.detail = false">
      <template v-slot:footer>
        <a-button type="primary" @click="visible.detail = false">关闭</a-button>
      </template>
      <a-spin :spinning="loading.isDetail">
        <a-carousel effect="fade">
          <div class="img-wrapper" v-for="imgItem in detailInfo.files" :key="imgItem.fileId">
            <img
              :src="`/api/ycloud-file-center/oper/download?access_token=` + token + `&fileId=` + imgItem.fileId"
              alt="加载失败"
            />
          </div>
        </a-carousel>
        <div class="detail-content-wrappter">
          <!-- 安全问题 -->
          <a-row v-if="listType === 'safety'" :gutter="50">
            <a-col :span="12">
              <span class="label">所属项目：</span>
              <span class="content">{{ detailInfo.project }}</span>
            </a-col>
            <a-col :span="12" v-if="listType === 'safety'">
              <span class="label">安全隐患：</span>
              <span class="content">{{
                detailInfo.problemVO !== undefined &&
                detailInfo.problemVO.length > 0 &&
                detailInfo.problemVO[0].treeLabelVO !== null
                  ? detailInfo.problemVO[0].treeLabelVO.name
                  : ''
              }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">检查人：</span>
              <span class="content">{{ detailInfo.employee }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">检查时间：</span>
              <span class="content">{{ detailInfo.checkDate }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">具体部位：</span>
              <span class="content">{{ detailInfo.checkDescribe }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">检查类型：</span>
              <span class="content">{{ detailInfo.checkType }}</span>
            </a-col>
            <a-col :span="12" v-if="listType === 'safety'">
              <span class="label">检查记录：</span>
              <span class="content">{{ detailInfo.description }}</span>
            </a-col>
            <a-col :span="12" v-else>
              <span class="label">问题描述：</span>
              <span class="content">{{ detailInfo.record }}</span>
            </a-col>
          </a-row>
          <!-- 质量问题 -->
          <a-row v-else>
            <a-col :span="12">
              <span class="label">整改单位：</span>
              <span class="content">{{ detailInfo.rectifierCompany }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">整改人：</span>
              <span class="content">{{ detailInfo.rectifier }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">整改期限：</span>
              <span class="content">{{ detailInfo.rectifyTerm }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">复查人：</span>
              <span class="content">{{ detailInfo.reCheck }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">问题分类：</span>
              <span class="content">{{ detailInfo.checkType }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">整改完成时间：</span>
              <span class="content">{{
                detailInfo.rectifyResultList !== null &&
                detailInfo.rectifyResultList !== undefined &&
                detailInfo.rectifyResultList.length > 0
                  ? detailInfo.rectifyResultList[0].rectifyDate
                  : ''
              }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">整改描述：</span>
              <span class="content">{{
                detailInfo.rectifyResultList !== null &&
                detailInfo.rectifyResultList !== undefined &&
                detailInfo.rectifyResultList.length > 0
                  ? detailInfo.rectifyResultList[0].description
                  : ''
              }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">整改状态：</span>
              <span class="content">{{
                detailInfo.rectifyResultList !== null &&
                detailInfo.rectifyResultList !== undefined &&
                detailInfo.rectifyResultList.length > 0
                  ? detailInfo.rectifyResultList[0].resultType.name
                  : ''
              }}</span>
            </a-col>
            <a-col :span="12">
              <span class="label">复核描述：</span>
              <span class="content">{{
                detailInfo.problemVO !== undefined &&
                detailInfo.problemVO.length > 0 &&
                detailInfo.problemVO[0].rectifyResultList != undefined &&
                detailInfo.problemVO[0].rectifyResultList.length > 0
                  ? detailInfo.problemVO[0].rectifyResultList[0].reviewDescription
                  : ''
              }}</span>
            </a-col>
          </a-row>
        </div>
      </a-spin>
    </BaseModal>
  </div>
</template>

<script>
import { Empty, Carousel } from 'ant-design-vue'
import BaseModal from '@/components/BaseModal'
import { getProblemListByModel, getProblemDetail } from '@/api/bimIntegrate/business.js'
import Vue from 'vue'
import Template from '@/views/construction/gantt/template.vue'
export default {
  components: {
    BaseModal,
    AEmpty: Empty,
    Template,
    Carousel,
  },
  props: {
    // 列表类别
    listType: {
      type: String,
      default: '',
    },
    // 模型ID
    modelId: {
      type: String,
      default: '',
    },
    // 项目ID
    projectId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      token: '',
      detailInfo: {}, // 详情展示的信息
      loading: {
        isList: false, // 是否加载列表中
        isDetail: false, // 是否加载详情
      },
      visible: {
        detail: false, // 详情弹窗的显隐
      },
      businessList: [], // 列表数据
    }
  },
  watch: {
    modelId: {
      handler() {
        this.getProblemListByModelReq()
      },
    },
    projectId: {
      handler() {
        this.getProblemListByModelReq()
      },
    },
    businessList: {
      handler() {
        const problemStatusMap = {
          0: 'pro', // 发起整改
          1: 'finish', // 整改中
          2: 'finish', // 待复查
          3: 'finish', // 复查通过
          4: 'delay', // 不合格不整改
        }
        const result = []
        try {
          this.businessList.forEach((item) => {
            item.problemVO &&
              item.problemVO.forEach((pItem) => {
                const partIds = []
                const partEntities = (pItem.bimId && pItem.bimId.split(',')) || [] // 得到构件实体信息列表
                partEntities.forEach((entityItem) => {
                  partIds.push(entityItem.split('&&&&')[1]) // 根据分隔符'&&&&'，取出构件uuid值
                })
                const status = (pItem.status && pItem.status.code) || ''
                result.push({
                  cate: item.cate, // 问题类别
                  checkType: item.checkType, // 检查类型
                  employee: item.employee, // 检查人
                  checkDate: item.checkDate, // 检查时间
                  problemId: item.id, // 问题ID，用于查询详情信息
                  ids: partIds, // 选择的构件ID数组
                  status: problemStatusMap[status], // 问题状态
                  description: pItem.description, // 问题描述
                })
              })
          })
        } catch (e) {
          console.error('pushpinListError:', e)
        }
        this.$emit('pushpinChanged', result)
      },
    },
  },
  created() {
    this.token = Vue.getAcloudProvider().getAccessToken()
    this.getProblemListByModelReq()
  },
  methods: {
    handleCancel() {
      this.$emit('cancel')
    },
    /**
     * 打开问题详情窗口
     * @param {Object} record 问题记录
     */
    openDetailModal(record = {}) {
      this.visible.detail = true
      this.getProblemDetailReq(record.id)
    },
    /**
     * 获取问题详情
     * @param {String} id 问题记录的ID
     */
    async getProblemDetailReq(id) {
      this.loading.isDetail = true
      const [err, res] = await getProblemDetail(id)
      if (!err) {
        this.detailInfo = res.data || {}
      }
      this.loading.isDetail = false
    },
    /**
     * 获取模型关联的问题列表
     */
    async getProblemListByModelReq() {
      if (!this.modelId || !this.projectId) return
      if (this.loading.isList) return
      this.loading.isList = true
      const params = {
        needCount: false,
        query: {
          bimModelId: this.modelId,
          projectId: this.projectId,
        },
      }
      const [err, res] = await getProblemListByModel(params)
      if (!err) {
        const list = res.data || []
        this.businessList = list.filter((item) => {
          return this.checkFilterType(item.cate)
        })
      }
      this.loading.isList = false
    },
    /**
     * 检测类型是否需要被筛选
     * @param {String} type 问题的类型
     */
    checkFilterType(type) {
      const map = {
        safety: 'SAFE',
        quality: 'QUALITY',
      }
      return map[this.listType] === type
    },
  },
}
</script>
<style lang="less" scoped>
.ListTemplate-container {
  width: 380px;
  z-index: 99;
  border-radius: 4px;
  text-align: left;
  height: 100%;
  overflow: hidden;
  color: #333;
  border: 2px solid rgba(245, 245, 245, 1);
  background: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  .page-header {
    padding: 13px 10px 13px 16px;
    background: rgba(245, 245, 245, 1);
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 14px;
      letter-spacing: 0;
    }
  }
  .page-body {
    flex: 1;
    overflow: auto;
    .item-box {
      cursor: pointer;
      margin: 20px 5px 0 5px;
      padding: 0 5px;
      box-shadow: -2px -2px 5px rgba(230, 230, 230, 1), 2px 2px 5px rgba(230, 230, 230, 1);
      border-radius: 4px;
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .item-row {
        padding: 10px 0;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
      }
      .item-footer {
        display: flex;
        justify-content: space-between;
      }
      .font--blue {
        color: rgba(0, 137, 202, 1);
      }
    }
  }
}
.detail-content-wrappter {
  padding: 0 15px;
  .content {
    font-weight: bold;
  }
}
/deep/ .ant-carousel {
  padding: 0 15px;
  /deep/ .img-wrapper {
    border: 1px solid #cccccc;
    border-radius: 4px;
    overflow: hidden;
    img {
      width: 100%;
      height: 300px;
      object-fit: contain;
    }
  }
}
</style>